<template>
	<cl-dialog
		title="退定金详情"
		width="500px"
		:visible.sync="visible"
		@close="close"
		:props="{
			appendToBody: true
		}"
	>
		<el-form label-width="120px">
			<el-form-item label="退回状态：">
				<span class="color-primary">{{ detail.yn | filterYn }}</span>
			</el-form-item>
			<el-form-item label="审核记录：">
				<ul class="mes-list">
					<template v-if="detail.suc && Object.keys(detail.suc).length">
						<li>
							<div class="mes">{{ detail.suc.mes }}</div>
							<div>
								({{ detail.suc.id_add_user_name }}：{{
									(detail.suc.create_date * 1000)
										| dateFormat("YYYY-MM-DD HH:mm:ss")
								}})
							</div>
							<el-image
								v-for="(img, i) in isArr(detail.suc.images)"
								:key="i"
								:src="img"
								:preview-src-list="isArr(detail.suc.images)"
								class="refimage"
								:z-index="3000"
								fit="cover"
							/>
						</li>
					</template>
					<template v-if="detail.mes && detail.mes.length">
						<li v-for="item in detail.mes" :key="item.id">
							<div class="mes">{{ item.mes }}</div>
							<div>
								({{ item.id_add_user_name }}：{{
									(item.create_time * 1000) | dateFormat("YYYY-MM-DD HH:mm:ss")
								}})
							</div>
						</li>
					</template>
					<span v-else>-</span>
				</ul>
			</el-form-item>
			<el-form-item label="退定金时间：">{{
				(detail.create_time * 1000) | dateFormat("YYYY-MM-DD HH:mm:ss")
			}}</el-form-item>
			<el-form-item label="退还金额：">{{ detail.back_money }}</el-form-item>
			<el-form-item label="退款方式：">{{ detail.back_type | filterBackType }}</el-form-item>
			<el-form-item label="退款人姓名：">{{ detail.back_user_name }}</el-form-item>
			<el-form-item label="退款人账号：">{{ detail.back_user_account }}</el-form-item>
			<el-form-item label="退款凭证：">
				<template v-if="detail.images">
					<el-image
						class="img-item"
						v-for="(item, index) in detail.images"
						:key="index"
						:src="item"
						:preview-src-list="detail.images"
						:z-index="3000"
						fit="cover"
					/>
				</template>
				<span v-else>-</span>
			</el-form-item>
			<el-form-item label="退款原因：">{{ detail.back_why }}</el-form-item>
			<el-form-item label="提交人：">{{ detail.id_add_user_name }}</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
const statusType = {
	0: { text: "已驳回" },
	1: { text: "待审核" },
	3: { text: "未打款" },
	4: { text: "已打款" },
	5: { text: "已恢复" }
};
const filterYn = (val, key = "text") => {
	return statusType[val] ? statusType[val][key] : "";
};
export default {
	data() {
		return {
			visible: false,
			detail: {
				images: []
			}
		};
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			this.getDetail(data);
		},
		close() {
			this.visible = false;
		},
		async getDetail({ id }) {
			const data = await this.$service.deposit.getrefunduse({ dep_id: id });
			this.detail = { ...data };
		},
		isArr(val) {
			if (!Array.isArray(val)) {
				return val.split(",");
			}
			return val;
		}
	},
	filters: {
		filterBackType(val) {
			switch (val) {
				case 1:
					val = "微信";
					break;
				case 2:
					val = "支付宝";
					break;
				case 3:
					val = "银行卡";
					break;
				default:
					val = "-";
					break;
			}
			return val;
		},
		filterYn
	}
};
</script>
<style lang="scss" scoped>
.refimage {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	margin-top: 10px;
}
::v-deep {
	.el-form-item {
		margin-bottom: 10px !important;
	}
}
.mes-list {
	list-style: none;
	padding-top: 6px;
	line-height: normal;
	li {
		color: #909399;
		& + li {
			margin-top: 10px;
		}
		.mes {
			color: #333;
		}
	}
}
.img-item {
	width: 100px;
	height: 100px;
	+ .img-item {
		margin-left: 10px;
	}
}
</style>
